{% extends "base.html" %}
{% load i18n %}
{% block head %}
<title>{% trans "文件备份" %}</title>
{{ block.super }}
{% endblock %}

{% block content %}
<div id="app" style="margin: auto; width: 90%; position: relative; left: 5%;">
    <el-container>
        <el-header class="header"></el-header>
        <el-container>
            <el-aside width="300px">
                <el-form ref="addForm" :model="topoForm" label-width="100px">
                    <el-form-item label="业务名称：">
                        <el-select v-model="topoForm.biz" placeholder="请选择业务" style="width: 100%"
                                   @change="presentTopo(topoForm)">
                            <el-option v-for="item in bkBizData" :label="item.name" :value="item.id + ':' + item.name"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="业务拓扑：">
<!--                        单选tree-->
                        <!--                        <el-tree :data="topoData" class="tree" node-key="bk_inst_id" @node-click="topoClick" :props="defaultProps"></el-tree>-->
<!--                        复选tree-->
                        <el-tree :data="topoData" class="tree" node-key="bk_inst_id" @check="topoClick" :props="defaultProps" show-checkbox></el-tree>
                    </el-form-item>
                </el-form>
            </el-aside>
            <el-main>
                <el-row>
                    <el-col :span="8">
                        <div>
                            <span>主机列表：</span>
                        </div>
                        <el-input
                                type="textarea"
                                placeholder="未查到ip地址"
                                v-model="hostArea"
                                autosize="true"
                                style="width: 80%"
                                v-loading="ipLoading">
                        </el-input>
                    </el-col>
                    <el-col :span="8">
                        <div>
                            <span>执行路径：</span>
                        </div>
                        <el-input
                                placeholder="请输入路径"
                                v-model="pathDir"
                                size="middle"
                                style="width: 80%">
                        </el-input>
                    </el-col>
                    <el-col :span="8">
                        <div>
                            <span>文件名：</span>
                        </div>
                        <el-input
                                placeholder="请输入后缀"
                                v-model="fileTail"
                                size="middle"
                                style="width: 80%">
                        </el-input>
                    </el-col>
                </el-row>
                <div>
                    <!--                    <el-button type="primary" style="position: fixed; right: 10%; top: 35%">立即搜索</el-button>-->
                    <el-button type="primary" @click="searchFile">立即搜索</el-button>
                </div>
                <div id="table" v-loading="loading"
                     element-loading-text="文件搜索中"
                     element-loading-spinner="el-icon-loading"
                     element-loading-background="rgba(0, 0, 0, 0.8)">
                    <el-table
                            :data="fileData"
                            style="width: 100%">
                        <el-table-column type="index" label="序号" width="60"></el-table-column>
                        <el-table-column
                                prop="ip"
                                label="ip"
                                width="150">
                        </el-table-column>
                        <el-table-column
                                prop="file_list"
                                label="文件列表"
                                width="360">
                        </el-table-column>
                        <el-table-column
                                prop="number"
                                label="文件数量"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                prop="size"
                                label="文件总大小"
                                width="120">
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button type="success" @click="backUp(scope.row)" :loading="backupLoading">
                                    立即备份
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-main>
        </el-container>
    </el-container>

</div>
<script>
    window.onload = function () {
        new Vue({
            delimiters: ['[[', ']]'],
            el: '#app',
            data() {
                return {
                    topoData: [],
                    defaultProps: {
                        children: 'child',
                        label: 'bk_inst_name'
                    },
                    topoForm: {},
                    hostSpan: '',
                    hostArea: '',
                    pathDir: '/tmp/test',
                    fileTail: '.log',
                    fileData: [],
                    bkBizData: [],
                    loading: false,
                    ipLoading: false,
                    backupLoading: false,
                }
            },
            computed: {},
            watch: {},
            created() {
                this.getBisiness()
            },
            mounted() {
            },
            methods: {
                getBisiness() {
                    axios.get(site_url + 'search_biz/').then(res => {
                        if (res.data.result) {
                            this.bkBizData = res.data.data
                        }
                    })
                },
                presentTopo(topoForm) {
                    axios.get('{{ SITE_URL }}get_biz_topo/', {params: topoForm}).then(res => {
                        if (res.data.result) {
                            this.topoData = res.data.data
                            console.log(this.topoData)
                        }
                    })
                },
                topoClick(_, data) {
                    this.ipLoading = true
                    axios.post('{{ SITE_URL }}get_checked_topo_host/', data).then(res => {
                        if (res.data.result) {
                            this.hostArea = res.data.data
                            console.log(this.hostArea)
                            this.ipLoading = false
                        }
                    })
                },
                searchFile() {
                    this.loading = true
                    let params = {
                        "host": this.hostArea,
                        "path": this.pathDir,
                        "tail": this.fileTail,
                        "biz_id": this.topoForm.biz
                    }
                    axios.post(site_url + 'search_file/', params).then(res => {
                        if (res.data.result) {
                            this.fileData = res.data.data
                        }
                        this.loading = false
                    }).catch(err => {
                        this.$message.warning('路径不合法,请重新输入')
                        this.loading = false
                        this.fileData = []
                    })
                },
                backUp(row) {
                    this.backupLoading = true
                    let params = {
                        "row": row,
                        "path": this.pathDir,
                        "ip_list": this.hostArea
                    }
                    axios.post(site_url + 'back_up/', params).then(res => {
                        if (res.data.result) {
                            this.$message.success(res.data.data)
                        }
                        this.backupLoading = false
                    })
                }
            }
        })
    }
</script>
<style>
</style>

{% endblock %}